<template>
  <PageView>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-form-item label="字段一">
            <a-input placeholder="请输入字段一" v-model="queryParam.field1" />
          </a-form-item>
          <a-form-item label="字段二">
            <a-select placeholder="请选择字段二" v-model="queryParam.field2">
              <a-select-option value="">全部</a-select-option>
              <a-select-option :value="1">成功</a-select-option>
              <a-select-option :value="2">失败</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="创建时间">
            <a-range-picker valueFormat="YYYY-MM-DD" v-model="queryParam.range" />
          </a-form-item>

          <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
          <a-button style="margin-left: 8px" @click="queryParam = {}">重置</a-button>
        </a-form>
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="$refs.refAddOrUpdate.add()">新建</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-button type="danger" icon="delete" @click="delByIds(selectedRowKeys)">删除</a-button>
        </a-dropdown>
      </div>
      <s-table ref="table" rowKey="field1" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data="loadData">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="field2" slot-scope="text, record, index"> 自定义内容 - {{ text }} </span>
        <span slot="pic" slot-scope="text, record, index">
          <!-- 随机图片 -->
          <img @click="preview(text)" :src="text" alt="" style="width: 100px; height: 100px;cursor: pointer;" />
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"> <a-icon type="edit" />编辑 </a>
          <a-divider type="vertical" />
          <a @click="handleDetail(record)"> <a-icon type="file" />详情 </a>
          <a-divider type="vertical" />
          <a @click="delByIds([record.affairId])"> <a-icon type="delete" />删除 </a>
        </span>
      </s-table>
      <add-or-update ref="refAddOrUpdate" @ok="handleOk" />
      <detail ref="refDetail" />
    </a-card>
  </PageView>
</template>

<script>

import { STable } from '@/components'
import { getList, del } from '@/api/test'
import addOrUpdate from './modules/add-or-update.vue'
import detail from './modules/detail.vue'
import { PageView } from '@/layouts'

export default {
  name: 'TableList',
  components: {
    STable,
    PageView,
    addOrUpdate,
    detail,
  },
  data() {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '序号',
          align: 'center',
          scopedSlots: { customRender: 'serial' },
        },
        {
          title: '字段一',
          dataIndex: 'field1',
        },
        {
          title: '字段二',
          dataIndex: 'field2',
          scopedSlots: { customRender: 'field2' },
        },
        {
          title: '图片',
          dataIndex: 'pic',
          scopedSlots: { customRender: 'pic' },
        },
        {
          title: '创建时间',
          dataIndex: 'time',
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let p = Object.assign(parameter, this.queryParam)
        console.log(p, '请求参数')

        let result = {
          pageNum: 1,
          total: 50,
          rows: Array(10)
            .fill(0)
            .map((item, index) => {
              return { id: index, field1: `field1_${index}`, field2: `field2_${index}`, time: '2022-01-02', pic: `https://picsum.photos/200/300?key=${index}` }
            }),
        }
        // 模拟请求
        return Promise.resolve().then(() => {
          return result
        })
        // 正常请求
        // return getList(p)
      },
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  methods: {
    // 图片预览
    preview(url) {
      // 工具函数 
      this.v_preview([url])
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleAdd() {
      this.$refs.refAddOrUpdate.add()
    },
    handleEdit(record) {
      this.$refs.refAddOrUpdate.edit(record)
    },
    handleDetail(record) {
      this.$refs.refDetail.open(record)
    },
    handleOk() {
      this.$refs.table.refresh(true)
    },
    delByIds(ids) {
      this.$confirm({
        title: '确定删除吗?',
        onOk: () => {
          // 删除逻辑
          del({ ids: ids.join(',') }).then((res) => {
            this.$message.success('删除成功')
            this.handleOk()
            this.selectedRowKeys = []
          })
        },
      })
    },
  },
}
</script>
